<!--
  @author:  long
  @date:    2023/3/27
  @file:    考评日历
  @require:
-->
<template>
  <div>
    <FixedOperation>
      <div class="flex items-center justify-between">
        <div>
          <i class="i-fa-solid-calendar-alt mr-1"></i>

          <span class="text-2xl font-semibold">考评日历</span>
        </div>

        <!-- 日历设置 -->
        <div class="text-right">
          <el-button
            type="primary"
            v-if="settingBtnShow"
            @click="handleCalendarSettings"
            icon="Plus"
            >日历管理</el-button
          >
        </div>
      </div>
    </FixedOperation>
    <div class="evaluationCalendar app-container">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="mb-1 font-semibold text-xl text-gray-600">
            考评日历（{{ dateType }}）
          </div>
          <el-calendar v-model="calendarValue">
            <!--选中小红点-->
            <template #date-cell="{ data }">
              <div :class="[judgeRange(data.day) ? 'spandate' : '']">
                <!--              {{ data.day }}-->
                <span>
                  {{ data.day.split('-').slice(2).join('-') }}
                </span>
              </div>
            </template>
          </el-calendar>
          <el-row class="mt-2">
            <el-col
              :span="24"
              :class="[
                'flex',
                'items-center',
                'justify-center',
                'py-3',
                'text-gray-500',
                isActive === 'month' ? 'is-active' : ''
              ]"
              @click="handeActive('month')"
            >
              <el-icon><Calendar /></el-icon>
              <span class="ml-2 text-lg">月考评日历</span>
            </el-col>
            <el-col
              :span="24"
              :class="[
                'flex',
                'items-center',
                'justify-center',
                'py-3',
                'text-gray-500',
                isActive === 'season' ? 'is-active' : ''
              ]"
              @click="handeActive('season')"
            >
              <el-icon><Calendar /></el-icon>
              <span class="ml-2 text-lg">季考评日历</span>
            </el-col>
            <el-col
              :span="24"
              :class="[
                'flex',
                'items-center',
                'justify-center',
                'py-3',
                'text-gray-500',
                isActive === 'year' ? 'is-active' : ''
              ]"
              @click="handeActive('year')"
            >
              <el-icon><Calendar /></el-icon>
              <span class="ml-2 text-lg">年考评日历</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="18">
          <template v-if="isActive == 'month'">
            <MonthInfo
              :infoData="infoData"
              ref="monthInfo"
              @change="infoChange"
            />
          </template>
          <template v-if="isActive == 'season'">
            <SeasonInfo
              :infoData="infoData"
              ref="seasonInfo"
              @change="infoChange"
            />
          </template>
          <template v-if="isActive == 'year'">
            <YearInfo
              :infoData="infoData"
              ref="yearInfo"
              @change="infoChange"
            />
          </template>
        </el-col>
      </el-row>
    </div>

    <el-drawer
      v-model="drawerOpen"
      :title="drawerTitle"
      direction="rtl"
      destroy-on-close
      size="50%"
      :close-on-click-modal="false"
    >
      <template #default>
        <template v-if="isActive == 'month'">
          <MonthSetUp :year="year" @closeDrawer="closeDrawer" />
        </template>
        <template v-if="isActive == 'season'">
          <SeasonSetUp :year="year" @closeDrawer="closeDrawer" />
        </template>
        <template v-if="isActive == 'year'">
          <YearSetUp :year="year" @closeDrawer="closeDrawer" />
        </template>
      </template>
    </el-drawer>
  </div>
</template>

<script setup name="EvaluationCalendar">
import MonthInfo from './modules/monthCalendar/info.vue'
import MonthSetUp from './modules/monthCalendar/setUp.vue'
import SeasonInfo from './modules/seasonCalendar/info.vue'
import SeasonSetUp from './modules/seasonCalendar/setUp.vue'
import YearInfo from './modules/yearCalendar/info.vue'
import YearSetUp from './modules/yearCalendar/setUp.vue'
import { getCurrentInstance } from 'vue'
import { getScheduleInfo } from '@/api/officeManage/evaluation'
import useUserStore from '@/store/modules/user'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()

const value = ref(new Date())
const settingBtnShow = ref(false)
const data = reactive({
  year: '',
  dateType: '月',
  activeDay: [],
  isActive: 'month',
  drawerOpen: false,
  drawerTitle: '',
  nowMonth: new Date().getMonth() + 1,
  infoData: [],
  startTime: '',
  endTime: '',
  calendarValue: new Date()
})
const {
  year,
  dateType,
  activeDay,
  isActive,
  drawerOpen,
  drawerTitle,
  nowMonth,
  infoData,
  startTime,
  endTime,
  calendarValue
} = toRefs(data)

/**
 * 判断范围
 */
const judgeRange = day => {
  if (startTime.value != '' && endTime.value != '') {
    let sDate = new Date(startTime.value).getTime()
    let eDate = new Date(endTime.value).getTime()

    let dayDate = new Date(day).getTime()

    if (sDate <= dayDate && dayDate <= eDate) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}

/**
 * 日历频率切换
 * @param val
 */
const handeActive = val => {
  isActive.value = val
  infoData.value = []
  switch (isActive.value) {
    case 'month':
      dateType.value = '月'
      break
    case 'season':
      dateType.value = '季'
      break
    case 'year':
      dateType.value = '年'
      break
  }
}

/**
 * info切换
 */
const infoChange = (obj, val) => {
  switch (isActive.value) {
    case 'month':
      console.info('12121212', val)
      calendarValue.value = new Date(
        proxy.$refs.monthInfo.year + '-' + val + '-1'
      )
      if (obj?.assessStime) {
        startTime.value = obj.assessStime
        endTime.value = obj.assessEtime
      }
      break
    case 'season':
      let year = proxy.$refs.seasonInfo.year
      let month = val * 3 - 2
      calendarValue.value = new Date(year + '-' + month + '-1')
      if (obj?.assessStime) {
        startTime.value = obj.assessStime
        endTime.value = obj.assessEtime
      }
      break
    case 'year':
      if (obj?.assessStime) {
        calendarValue.value = new Date(obj.assessStime)

        startTime.value = obj.assessStime
        endTime.value = obj.assessEtime
      } else {
        let year = proxy.$refs.yearInfo.tabActiveName
        calendarValue.value = new Date(year + '-1-1')
      }

      break
  }
}

/**
 * 日历设置
 */
const handleCalendarSettings = () => {
  switch (isActive.value) {
    case 'month':
      drawerTitle.value = '月考评日历设置'
      year.value = proxy.$refs.monthInfo.year

      break
    case 'season':
      drawerTitle.value = '季考评日历设置'
      year.value = proxy.$refs.seasonInfo.year
      break
    case 'year':
      drawerTitle.value = '年考评日历设置'
      year.value = proxy.$refs.yearInfo.tabActiveName + ''
      break
  }
  drawerOpen.value = true
}

/**
 * 关闭抽屉
 */
const closeDrawer = year => {
  drawerOpen.value = false

  switch (isActive.value) {
    case 'month':
      proxy.$refs.monthInfo.year = year
      proxy.$refs.monthInfo.handleCalendarQuery()
      break
    case 'season':
      proxy.$refs.seasonInfo.year = year
      proxy.$refs.seasonInfo.handleCalendarQuery()
      break
    case 'year':
      proxy.$refs.yearInfo.year = year
      proxy.$refs.yearInfo.handleCalendarQuery()
      break
  }
}

/**
 * 日历查询
 */
const handleCalendarQuery = () => {
  let params = {
    orgId: userStore.user.orgId,
    deptId: userStore.user.deptId
  }
  switch (isActive.value) {
    case 'month':
      params.scheduleType = '0' //月
      params.assessAtYear = new Date().getFullYear()
      break
    case 'season':
      params.scheduleType = '1' //季
      params.assessAtYear = new Date().getFullYear()
      break
    case 'year':
      params.scheduleType = '2' //年
      params.assessAtYear = new Date().getFullYear()
      break
  }
  getScheduleInfo(params).then(res => {
    infoData.value = res.data
    if (isActive.value === 'month') {
      if (res.data != null && res.data.length > 0) {
        infoChange(res.data[nowMonth.value - 1], nowMonth.value)
      }
    }
    console.info('res', res)
  })
}

/**
 * 初始化
 */
const init = () => {
  let roles = ['jxgly', 'jxzbgly']
  let count = 0
  roles.forEach(item => {
    if (userStore.user.roles.findIndex(t => t.roleKey == item) != -1) {
      count++
    }
  })
  if (count > 0) {
    settingBtnShow.value = true
  }

  // handleCalendarQuery()
}
init()
</script>

<style scoped lang="scss">
.is-active {
  @apply bg-gray-100 border-r-2 border-r-solid border-r-indigo-300;
}

:deep(.el-calendar__body) {
  padding: 0;
}

:deep(.el-button-group) {
  display: none;
}

:deep(.el-calendar__title) {
  font-size: 14px;
}

:deep(.el-calendar-table thead th) {
  padding: 5px 0;
  font-size: 14px;
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 0;
  width: 100%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-calendar-table td.is-selected) {
  background: transparent;
}
:deep(.el-calendar-table td.is-today) {
  color: #000;
}

:deep(.el-calendar-table .el-calendar-day:hover) {
  cursor: default;
  background: transparent;
}
/*非本月字体颜色*/
:deep(.el-calendar-table:not(.is-range) td.next),
:deep(.el-calendar-table:not(.is-range) td.prev) {
  color: #000;
  cursor: pointer;
}

.spandate {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-color-primary);
  font-weight: 700;
}
.i-fa-solid-calendar-alt {
  color: var(--el-color-primary);
  font-size: 16px;
}
</style>
